<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful Bootstrap</title>
    <link href="/js/fontAwesome/font-awesome-4.3.0/css/font-awesome.min.css"type="text/css"  rel="stylesheet">
    <link href="/js/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/bootstrapTable/bootstrap-table.min.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        /* 
                固定宽度
                强制不换行
                隐藏溢出
                文本超出省略
                通过上述四部设置可以保证div下的文字超过指定长度后隐藏
                如果直接将该样式设置在td或者th上没有效果
                所以采用td嵌套div的方式达到效果
        */
        .no-wrap {
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .no-wrap a {
            text-decoration: none;
        }
    </style>
  </head>
  
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <div class="row">
                    <div class="col-md-12">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <span class="badge">14</span>告警数量
                            </li>
                            <li class="list-group-item">
                                <span class="badge">14</span>告警数量
                            </li>
                            <li class="list-group-item">
                                <span class="badge">14</span>告警数量
                            </li>
                            <li class="list-group-item">
                                <span class="badge">14</span>告警数量
                            </li>
                            <li class="list-group-item">
                                <span class="badge">14</span>告警数量
                            </li>
                        </ul>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="list-group">
                                <a class="list-group-item active" href="javascript:console.log('告警')">告警数量</a>
                                <a class="list-group-item disabled" href="#">告警数量</a>
                                <a class="list-group-item" href="javascript:console.log('告警')">告警数量</a>
                                <a class="list-group-item" href="javascript:console.log('告警')">告警数量</a>
                                <a class="list-group-item" href="javascript:console.log('告警')">告警数量</a>
                                <a class="list-group-item" href="javascript:console.log('告警')">告警数量</a>
                                <a class="list-group-item" href="javascript:console.log('告警')">告警数量</a>
                            </div>  
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-10">
                <div class="panel panel-default">
                    <div class="panel-heading">用户列表</div>
                    <table class="table" data-toggle="table" data-url="/user/findAll"
                        data-pagination="true" data-side-pagination="server"
                        data-search="true" data-striped="true" data-detail-view="true"
                        data-page-list="[10, 25, 50, 100]" data-search-text="快速搜索："
                        data-search-align="left" data-show-toggle="true">
                        <thead>
                            <tr>
                                <th data-checkbox="true"></th>
                                <th data-field="id" data-align="center">用户编号</th>
                                <th data-field="username" data-align="center">用户名称</th>
                                <th data-field="loginName" data-align="center">登录名</th>
                                <th data-align="center">角色</th>
                                <th data-field="mobile" data-align="center">安全域</th>
                                <th data-field="userStatus" data-align="center" data-formatter="checkUserStatus">状态</th>
                                <th data-field="email" data-width="300px" data-align="center" data-formatter="genEmailLink">邮件</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <script src="/js/bootstrapTable/bootstrap-table-all.min.js" type="text/javascript"></script>
    <script src="/js/bootstrapTable/bootstrap-table-zh-CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function() {
            //出于性能考虑，tooltip需要手动初始化
            $("[data-toggle='tooltip']").tooltip();
            //使用tooltip有几个bug
            //由于需要在超长列使用Tool tip，但是Bootstrap的tooltip
            //会被包裹在使用省略号显示超长内容样式的div上，导致Tooltip
            //的内容也无法完全显示完
            //同时鼠标滑过a标签时，a标签闪烁，并且tooltip的内容也出现闪烁
            //暂时使用title，但是缺点是样式不美观
            console.log("Window加载完毕");
        };
        $(function() {
            console.log("Bootstrap Powered !");
        });
        function checkUserStatus(value, row, index) {
            return "<i class='" + (value == 1 ? "fa fa-check" : "fa fa-remove") + "'></i>";
        }
        function genEmailLink(value, row, index) {
            return "<div class='no-wrap'><a title='" + value + "'href='mailto:" + value +"'>" + value + "</a></div>";
        }
    </script>
  </body>
</html>